<template>
  <div id="app">
    
    <!------------- 底部栏----------- -->
    <tab-bar v-show="!flag" @tabIndex="getIndex"></tab-bar>
    
    <component :is="index==0&&home"></component>
    <component :is="index==1&&(flag ? search:coures)"
    @sendSearch="getSearch"
    @getBack="backHome"
    ></component>
    <component :is="index==2&&exercise"></component>
    <component :is="index==3&&bookclass"></component>
    <component :is="index==4&&person"></component>
    
  </div>
</template>

<script>
import TabBar from './components/common/tabbar/TabBar.vue'
import Home from './views/Home.vue'
import Coures from './views/Coures.vue'
import Exercise from './views/Exercise.vue'
import BookClass from './views/BookClass.vue'
import Person from './views/Person.vue'
import Search from './views/Search.vue'



export default {
  name: 'App',
  components: {
    
    TabBar
  },
  data() {
    return {
      flag:false,
      index:0,
      home:Home,
      coures:Coures,
      exercise:Exercise,
      bookclass:BookClass,
      person:Person,
      search:Search
    }
  },
  methods: {
    getIndex(i){
      this.index=i
    },
    getSearch(r){
      this.flag=r
    },
    backHome(){
      this.flag=false
    }
  },
}
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  body{
    background-color: #f2f3f5;
  }
</style>
